<template>
    <div class="wavy-svg">
        <svg width="100vw" height="80px" version="1.1"
             xmlns="http://www.w3.org/2000/svg">
            <path :d="'M0 0 H'+screenWidth+' V50 H0 Z'" stroke="#FFBACF" fill="#FFBACF"></path>
            <path :d="`M0 45 c${wavyWidth/3} -5, ${wavyWidth/3*2} -5, ${wavyWidth} 5 H -${wavyWidth} Z`" stroke="#FFD7F3"  fill="#FFD7F3"/>
            <path :d="`M0 55 c${wavyWidth/3} 5, ${wavyWidth/3*2} 5, ${wavyWidth} -5 H -${wavyWidth} Z`" stroke="#FFD7F3" fill="#FFD7F3"/>
            <path :d="`M${wavyWidth} 50 c${wavyWidth/3} -10, ${wavyWidth/3*2} -10, ${wavyWidth} 0`" stroke="#FFD9D9"  fill="#FFD9D9"/>
            <path :d="`M${wavyWidth} 50 c${wavyWidth/3} 10, ${wavyWidth/3*2} 10, ${wavyWidth} 0`" stroke="#FFD9D9" fill="#FFD9D9"/>
            <path :d="`M${wavyWidth*2} 50 c${wavyWidth/3} -10, ${wavyWidth/3*2} -10, ${wavyWidth} 0`" stroke="#FFD7F3"  fill="#FFD7F3"/>
            <path :d="`M${wavyWidth*2} 50 c${wavyWidth/3} 10, ${wavyWidth/3*2} 10, ${wavyWidth} 0`" stroke="#FFD7F3" fill="#FFD7F3"/>
            <path :d="`M${wavyWidth*3} 50 c${wavyWidth/3} -10, ${wavyWidth/3*2} -10, ${wavyWidth} -5 V 50 H -${wavyWidth}`" stroke="#FFD9D9"  fill="#FFD9D9"/>
            <path :d="`M${wavyWidth*3} 50 c${wavyWidth/3} 10, ${wavyWidth/3*2} 10, ${wavyWidth} 5 V 50 H -${wavyWidth}`" stroke="#FFD9D9" fill="#FFD9D9"/>
        </svg>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue } from "vue-property-decorator";

    @Component({components: {}})
    export default class WavySvg extends Vue {
        private publicPath = process.env.BASE_URL;

        private get screenWidth():number{
            const screenWidth=window.screen.width;
            return screenWidth;
        }

        private get wavyWidth():number{
            const wavyWidth=this.screenWidth/4;
            return wavyWidth;
        }

        private mounted(): void {

        }


    }
</script>

<style scoped lang="stylus">
    //$photograph-width :=80px;
   // $photograph-height :=80px;
   .border-add
       border 1px dashed $theme-line-color;

   .photograph
        //width $photograph-width;
        //height $photograph-height;
        border-radius 50%;
        background-color #fff;
        color $theme-viceColor-font;
        text-align center;
        flex-wrap wrap;
        align-content center;

        .img-none
            border-radius 50%;
            flex-wrap wrap;
            justify-content center;
            align-content center;

           .icon-xiangji2
               font-size 30px;
               color #B9B8CD;
               margin-bottom 3px;

        .img
            border-radius 50%;



   .self-img
       .img-none
           position relative;
           background-color #CDE0E4;
           border-radius 50%;
           justify-content center;
           align-items center;
           overflow hidden;

           .svg-icon
               font-size 17vw;
               margin-top -3px;

           .noneImg-tip
                position absolute;
                bottom 10px;
                left 5px;
                //width 20vw;
                height 16px;
                line-height 16px;
                text-align center;
                font-size 3.2vw;
                -webkit-text-size-adjust:none
                color #fff;
                background-color rgba(84,97,115,.4);

</style>
